{% extends 'base.html' %}{% load staticfiles %}
{% block metamessage %}
<!-- 禁止浏览器从本地缓存中调阅页面。--> 
<meta http-equiv="pragram" content="no-cache"> 
<!--网页不保存在缓存中，每次访问都刷新页面。--> 
<meta http-equiv="cache-control" content="no-cache, must-revalidate"> 
<!--同上面意思差不多，必须重新加载页面--> 
<meta http-equiv="expires" content="0"> 
<!--网页在缓存中的过期时间为0，一旦网页过期，必须从服务器上重新订阅--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
{% endblock %}
{% block style %}
	<style type="text/css">
		body {
			background: black
		}
		div.col-lg-2 {
			text-align: center;
		}
		.title-light {
			color: #ccc;
			margin: 40px 10px;
		}
		.resize10 {
			width: 100%;
			height: 100%;
		}
		.resize8 {
			width: 80%;
			height: 80%;
			color: red
		}
		.success {
			display: block;
			color: green;
		}
		.panel-body-img {
			margin: 15px 0px;
			max-width: 100%;
			max-height: 100%;
			overflow: hidden;
		}
		div.edge {
			margin: 10px 15px;
		}
	</style>

{% endblock %}
{% block title %}车牌识别{% endblock %}
{% block content %}
	<div id="skl-content">
		<ul class="nav nav-tabs">
			<li role="presentation" class="skl active"><a href="#">车牌图片</a></li>
			<li role="presentation" class="skl"><a href="#">预处理</a></li>
			<li role="presentation" class="skl"><a href="#">定位车牌</a></li>
			<li role="presentation" class="skl"><a href="#">字符分割并识别</a></li>
		</ul>
		<div style="position:fixed;right: 20px;bottom: 80px;z-index: 100">
			<div class="btn-group edge operate-group">
				<button class="btn btn-warning recreate-clickable" disabled="disabled" @click="recreate">重新生成</button>
				<button class="btn btn-primary next-step-clickable" @click="nextStep()">下一步</button>
			</div>
			<button class="btn btn-primary edge restart hidden" @click="gotofirst">重新开始</button>
		</div>
		<div class="item">
			<h3 class="title-light">请选择车牌图片</h3>
			<div class="row">
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/1.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/2.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/3.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/4.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/16.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/7.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/8.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/9.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/13.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/11.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/12.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
				<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
					<img src="{% static 'imgs/main/20.jpg' %}" alt="" class="img-rounded panel-body-img resize10">
					<div class="hidden"><span class="glyphicon glyphicon-ok"></span></div>
				</div>
			</div>
            <h3 class="title-light">使用自定义图片</h3>
            <div class="form-group" style="margin-left: 20px">
                <input
                        type="file"
                        class="upload"
                        id="upload"
                        style="margin: 15px;display: inline-block"
                        accept="image/*"
                        title="选择图片后点击下一步将提交该图片到服务器并进行解析" />
                <span class="btn-group">
                    <button class="btn btn-success" @click="upload">上传图片</button>
                    <button class="btn btn-primary" id="usethis" disabled="disabled" @click="useupload">使用该图</button>
                    <span class="btn hidden"><span class="glyphicon glyphicon-ok"></span></span>
                </span>
            </div>
		</div>
		<div class="item hidden">
			<h3 class="title-light">预处理</h3>
			<div class="row">
				<div class="col-md-4 col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">去噪</div>
						<div class="panel-body">
							<div class="row">
								<h4 class="col-xs-12">高斯滤波</h4>
								<form class="form-inline col-xs-12">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">高斯核</div>
											<input type="number" class="form-control parameter gaussian-focus" step="2"
												   @change="limitNum(1)" placeholder="值必须为正奇数"
												   v-model="p1.gaussian_kernel" title="高斯核值必须为正奇数">
										</div>
									</div>
								</form>
								<img src="{% static 'imgs/main/nl.jpg' %}"
									 class="col-xs-12 panel-body-img gaussian-image">
							</div>
							<div class="row">
								<h4 class="col-xs-12">中值滤波</h4>
								<form class="form-inline col-xs-12">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon parameter" title="是否使用中值滤波">
												<input class="parameter" type="checkbox" v-model="p1.median_checked"
													   @click="medianCheck">
											</div>
											<div class="input-group-addon">内核</div>
											<input type="number" class="form-control usemedian parameter" step="2"
												   @change="limitNum(2)" placeholder="值必须为正奇数" title="值必须为正奇数"
												   v-model="p1.median_kernel">
										</div>
									</div>
								</form>
								<img src="{% static 'imgs/main/nl.jpg' %}"
									 class="col-xs-12 panel-body-img median-image">
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">二值化</div>
						<div class="panel-body">
							<div class="row">
								<h4 class="col-xs-12">Sobel找边缘</h4>
								<form class="form-inline col-xs-12">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">垂直</div>
											<div class="input-group-addon">
												<input class="parameter" type="radio" v-model="p1.isVertical"
													   value="true">
											</div>
											<div class="input-group-addon">水平</div>
											<div class="input-group-addon">
												<input class="parameter" type="radio" v-model="p1.isVertical"
													   value="false">
											</div>
										</div>
									</div>
								</form>
								<img src="{% static 'imgs/main/nl.jpg' %}" class="col-xs-12 panel-body-img sobel-image">
							</div>
							<div class="row">
								<h4 class="col-xs-12">二值化</h4>
								<form class="form-inline col-xs-12">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">阀值</div>
											<input type="number" @change="limitNum(3)"
												   class="form-control parameter useotsu sobelThreshold"
												   v-model="p1.threshold">
											<div class="input-group-addon">使用OTSU</div>
											<div class="input-group-addon">
												<input class="parameter" type="checkbox" v-model="p1.otsu_checked"
													   @click="otsuCheck">
											</div>
										</div>
									</div>
								</form>
								<img src="{% static 'imgs/main/nl.jpg' %}"
									 class="col-xs-12 panel-body-img threshold-image">
							</div>

						</div>
					</div>
				</div>
				<div class="col-md-4 col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">闭操作</div>
						<div class="panel-body">
							<div class="row">
								<h4 class="col-xs-12">膨胀</h4>
								<form class="form-inline col-xs-12">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">x</div>
											<input type="number" class="form-control parameter"
												   v-model="p1.dilate_kernel.x" @change="limitNum(4)">
											<div class="input-group-addon">y</div>
											<input type="number" class="form-control parameter"
												   v-model="p1.dilate_kernel.y" @change="limitNum(5)">
											<div class="input-group-addon">次数</div>
											<input type="number" class="form-control parameter"
												   v-model="p1.dilate_kernel.times" @change="limitNum(6)">
										</div>
									</div>
								</form>
								<img src="{% static 'imgs/main/nl.jpg' %}"
									 class="col-xs-12 panel-body-img dilate-image">
							</div>
							<div class="row">
								<h4 class="col-xs-12">腐蚀</h4>
								<form class="form-inline col-xs-12">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">x</div>
											<input type="number" class="form-control parameter"
												   v-model="p1.erode_kernel.x" @change="limitNum(7)">
											<div class="input-group-addon">y</div>
											<input type="number" class="form-control parameter"
												   v-model="p1.erode_kernel.y" @change="limitNum(8)">
											<div class="input-group-addon">次数</div>
											<input type="number" class="form-control parameter"
												   v-model="p1.erode_kernel.times" @change="limitNum(9)">
										</div>
									</div>
								</form>
								<img src="{% static 'imgs/main/nl.jpg' %}" class="col-xs-12 panel-body-img erode-image">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="item hidden">
			<h3 class="title-light">定位车牌</h3>
			<div class="row">
				<div class="col-md-4 col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">形态学</div>
						<div class="panel-body">
							<div class="row">
								<h4 class="col-xs-12">描边</h4>
								<img src="{% static 'imgs/main/nl.jpg' %}"
									 class="col-xs-12 panel-body-img counter-image">
							</div>
							<div class="row">
								<h4 class="col-xs-12">矩形框过滤</h4>
								<form action="" class="form-inline col-xs-12">
									<div class="form-group">
										<div class="input-group">
											<div class="input-group-addon">宽高比</div>
											<div class="input-group-addon">最低</div>
											<input type="number" class="form-control parameter" step="0.1"
												   v-model="p2.minSpecific" @change="limitNum(10)">
											<div class="input-group-addon">最高</div>
											<input type="number" class="form-control parameter" step="0.1"
												   v-model="p2.maxSpecific" @change="limitNum(11)">
										</div>
									</div>
								</form>
								<img src="{% static 'imgs/main/nl.jpg' %}" class="col-xs-12 panel-body-img rect-image">
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">寻找车牌</div>
						<div class="panel-body">
							<div class="row">
								<h4 class="col-xs-12">归一化结果</h4>
								<div v-for="(itm, idx) in p2.num_plate" class="col-md-6 col-xs-12">
									<h4 class="col-xs-2 text-center">
										{% verbatim vblock %}{{ idx }}{% endverbatim vblock %}</h4>
									<img :src="itm.src" class="panel-body-img col-xs-8">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">车牌过滤并矫正</div>
						<div class="panel-body">
							<div class="row">
								<h4 class="col-xs-12">过滤并矫正结果</h4>
								<div v-for="(itm, idx) in p2.num_plate_final" class="col-md-6 col-xs-12">
									<h4 class="col-xs-2 text-center">
										{% verbatim vblock %}{{ idx }}{% endverbatim vblock %}</h4>
									<img :src="itm.src" class="panel-body-img col-xs-12">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="item hidden">
			<h3 class="title-light">字符分割并识别</h3>
			<div class="row">
				<div class="col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">字符分割</div>
						<div class="panel-body">
							<div class="row">
								<h4 class="col-xs-12">车牌图片</h4>
								<div v-for="itm in p2.num_plate_final" class="col-md-3 col-sm-6 col-xs-12">
									<img :src="itm.src" class="panel-body-img col-xs-11">
								</div>
							</div>
							<div class="row">
								<h4 class="col-xs-12">分割过程</h4>
								<div class="col-md-3 col-sm-6 col-xs-12" v-for="itm in p3.prce">
									<h5 class="col-xs-12">{% verbatim ttblock %}{{ itm.title }}{% endverbatim ttblock %}</h5>
									<img :src="itm.src" class="col-xs-12">
								</div>
							</div>
							<div class="row">
								<h4 class="col-xs-12">分割结果</h4>
								<div class="col-lg-1 col-md-2 col-sm-3 col-xs-4" v-for="itm in p3.splited">
									<img :src="itm" class="col-xs-12">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-12">
					<div class="panel panel-primary">
						<div class="panel-heading">字符识别</div>
						<div class="panel-body">
							<div class="row">
								<h4 class="col-xs-12">识别结果</h4>
								<div class="col-sm-2 col-xs-3 edge" v-for="itm in p3.results">
									<div class="row">
										<img :src="itm.image" class="col-xs-9">
										<h5 class="col-xs-3">{% verbatim cdblock %}{{ itm.code }}{% endverbatim cdblock %}</h5>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div data-toggle="modal" data-target="#myAlert" style="display: none;" id="alertMsg"></div>
		<div class="modal fade" tabindex="-1" role="dialog" id="myAlert">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">提示</h4>
					</div>
					<div class="modal-body">
						<p>{% verbatim myblock %}{{ alert_msg }}{% endverbatim myblock %}&hellip;</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">
							取消
						</button>
						<button type="button" class="btn btn-primary" data-dismiss="modal" @click="todo(callback)">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
{% block footerscript %}
	<script src="{% static 'js/solve403.js' %}"></script>
	<script src="{% static 'js/skl.js' %}"></script>
	<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
	<script type="text/javascript">

		// 统筹页面操作
		var xw = new Vue({
			el: '#skl-content',
			data: {
				step: 0, //当前操作所在步骤
                uploadfile: '',
				process_step: 0, // 当前车牌识别流程执行到的步骤
				selectImgSrc: '', //  被操作的图片数据
				alert_msg: "请选择要识别图片",
				whatTodo: "nothing",
				p1: { //预处理页面数据
					gaussian_kernel: config.p1.gaussian_kernel,
					median_kernel: config.p1.median_kernel,
					median_checked: config.p1.median_checked,
					sobel: config.p1.sobel,
					isVertical: config.p1.isVertical,
					threshold: config.p1.threshold,
					otsu_checked: config.p1.otsu_checked,
					dilate_kernel: { //膨胀
						x: config.p1.dilate_kernel.x,
						y: config.p1.dilate_kernel.y,
						times: config.p1.dilate_kernel.times
					},
					erode_kernel: { // 腐蚀
						x: config.p1.erode_kernel.x,
						y: config.p1.erode_kernel.y,
						times: config.p1.erode_kernel.times
					}
				},
				p2: {
					prev_image: config.p2.prev_image,
					minSpecific: config.p2.minSpecific,
					maxSpecific: config.p2.maxSpecific,
					num_plate: [
						{src: config.default_image}
					],
					num_plate_final: [
						{src: config.default_image}
					]
				},
				p3_req: {
					num_plate_image: [] // 用于发送到服务器的图片集
				},
				p3: {
					prce: [
						{
							title: "灰度化 高斯滤波 中值滤波",
							src: config.default_image
						},
						{
							title: "Sobel算子 寻找水平、垂直边缘 混合两张边缘图",
							src: config.default_image
						},
						{
							title: "OTSU二值化 膨胀 腐蚀",
							src: config.default_image
						},
						{
							title: "垂直、水平方向白色像素累加",
							src: config.default_image
						}
					],
					splited: [
						config.default_image
					],
					results :[
						{image : config.default_image, code : ''}
					]
				},
                callback: function () {
                    console.log("confirm callback")
                }

			},
			methods: {
				// 下一步方法
				nextStep: function () {
					var getImg = $("img.resize8");
					var uploadImg = $('span.btn.success');
					var that = this,
						path = "{% static 'imgs/main/nl.jpg' %}";
					switch (this.step) {
						case 0: // 选择图片
							if (getImg.length || uploadImg.length) {
								this.step = 1;
								if (this.step > this.process_step) this.process_step++;
								showOrHide(1);
								showLoading(true);
								getServData({% url 'process_image' %}, { // 发送第二页的操作数据到服务器，服务器响应第二页显示的图片内容
									// 传给服务器的参数
									"step": this.step,
									"image": this.selectImgSrc,
									"part1": JSON.stringify(this.p1)
								}, function (data) {
									$("img.gaussian-image").attr('src', path.replace('imgs/main/nl.jpg', data.gaussian_image));
									$("img.median-image").attr('src', path.replace('imgs/main/nl.jpg', data.median_image));
									$("img.sobel-image").attr('src', path.replace('imgs/main/nl.jpg', data.sobel_image));
									$("img.threshold-image").attr('src', path.replace('imgs/main/nl.jpg', data.threshold_image));
									$("img.dilate-image").attr('src', path.replace('imgs/main/nl.jpg', data.dilate_image));
									$("img.erode-image").attr('src', path.replace('imgs/main/nl.jpg', data.erode_image));
									that.p2.prev_image = path.replace('imgs/main/nl.jpg', data.erode_image);
									showLoading(false);
								}, function(){
									showLoading(false);
									that.whatTodo = "refresh";
									this.alert_msg = "服务器识别出错，请刷新网页后重试";
									$("#alertMsg").trigger('click');
								});
							} else {
								showOrHide(0);
								this.alert_msg = "请选择要识别图片";
								$("#alertMsg").trigger('click');
							}
							break;
						case 1: // 预处理
							showOrHide(2);
							this.step = 2;
							showLoading(true);
							getServData({% url 'process_image' %}, {
								// 传给服务器的参数
								"step": this.step,
								"image": this.selectImgSrc,
								"image_ter": this.p2.prev_image,
								"part2": JSON.stringify(this.p2)
							}, function (data) {
								$("img.counter-image").attr('src', path.replace('imgs/main/nl.jpg', data.counter_image));
								$("img.rect-image").attr('src', path.replace('imgs/main/nl.jpg', data.rect_image));
								that.p2.num_plate.length = 0;
								for (i in data.num_plate_image) {
									that.p2.num_plate.push({src: "/static/" + data.num_plate_image[i]});
								}
								that.p2.num_plate_final.length = 0;
								for (i in data.final_num_plate_image) {
									that.p2.num_plate_final.push({src: "/static/" + data.final_num_plate_image[i]});
									that.p3_req.num_plate_image.push(path.replace('imgs/main/nl.jpg', data.final_num_plate_image[i]));
								}
								showLoading(false);
							}, function(){
								showLoading(false);
								that.whatTodo = "refresh";
								this.alert_msg = "服务器识别出错，请刷新网页后重试";
								$("#alertMsg").trigger('click');
							});
							break;
						case 2: //车牌定位
							showOrHide(3);
							this.step = 3;
							showLoading(true);
							getServData({% url 'process_image' %}, {
								"step": this.step,
								"image": $(this).selectImgSrc,
								"part3": JSON.stringify(this.p3_req)
							}, function (data) {
								console.log(data);
								for (i in data.split_process_img) {
									that.p3.prce[i].src = "/static/" + data.split_process_img[i];
								}
								that.p3.splited.length = 0;
								for (j in data.split_result) {
									that.p3.splited.push("/static/" + data.split_result[j]);
								}
								that.p3.results.length = 0;
								if(data.result_img){
									for (k in data.result_img) {
										that.p3.results.push({
											image : "/static/" + data.result_img[k],
											code : data.result_word[k]
										});
									}
								}
								else{
									that.p3.results.push({
										code : "识别失败"
									});
								}
								showLoading(false);
							}, function(){
								showLoading(false);
								that.whatTodo = "refresh";
								this.alert_msg = "服务器识别出错，请刷新网页后重试";
								$("#alertMsg").trigger('click');
							});
							break;
					}
				},
				// 当参数发生改变重新执行
				recreate: function () {  // 点击重新生成触发事件
					$("button.recreate-clickable").attr("disabled", "disabled");
					$("button.next-step-clickable").removeAttr("disabled");
					var that = this,
						path = "{% static 'imgs/main/nl.jpg' %}";
					switch (this.step) {
						case 1:
							showLoading(true);
							config.p1.gaussian_kernel = this.p1.gaussian_kernel,
								config.p1.median_checked = this.p1.median_checked,
								config.p1.sobel = this.p1.sobel,
								config.p1.isVertical = this.p1.isVertical,
								config.p1.otsu_checked = this.p1.otsu_checked,
								config.p1.dilate_kernel.x = this.p1.dilate_kernel.x,
								config.p1.dilate_kernel.y = this.p1.dilate_kernel.y,
								config.p1.dilate_kernel.times = this.p1.dilate_kernel.times,
								config.p1.erode_kernel.x = this.p1.erode_kernel.x,
								config.p1.erode_kernel.y = this.p1.erode_kernel.y,
								config.p1.erode_kernel.times = this.p1.erode_kernel.times;
							getServData({% url 'process_image' %}, { // 发送第二页的操作数据到服务器，服务器响应第二页显示的图片内容
								// 传给服务器的参数
								"step": this.step,
								"image": this.selectImgSrc,
								"part1": JSON.stringify(this.p1)
							}, function (data) {
								$("img.gaussian-image").attr('src', path.replace('imgs/main/nl.jpg', data.gaussian_image));
								$("img.median-image").attr('src', path.replace('imgs/main/nl.jpg', data.median_image));
								$("img.sobel-image").attr('src', path.replace('imgs/main/nl.jpg', data.sobel_image));
								$("img.threshold-image").attr('src', path.replace('imgs/main/nl.jpg', data.threshold_image));
								$("img.dilate-image").attr('src', path.replace('imgs/main/nl.jpg', data.dilate_image));
								$("img.erode-image").attr('src', path.replace('imgs/main/nl.jpg', data.erode_image));
								that.p2.prev_image = path.replace('imgs/main/nl.jpg', data.erode_image);
								showLoading(false);
							}, function(){
								showLoading(false);
								that.whatTodo = "refresh";
								this.alert_msg = "服务器识别出错，请刷新网页后重试";
								$("#alertMsg").trigger('click');
							});
							break;
						case 2:
							showLoading(true);
							getServData({% url 'process_image' %}, {
								// 传给服务器的参数
								"step": this.step,
								"image": this.selectImgSrc,
								"image_ter": this.p2.prev_image,
								"part2": JSON.stringify(this.p2)
							}, function (data) {
								$("img.counter-image").attr('src', path.replace('imgs/main/nl.jpg', data.counter_image));
								$("img.rect-image").attr('src', path.replace('imgs/main/nl.jpg', data.rect_image));
								that.p2.num_plate.length = 0;
								for (i in data.num_plate_image) {
									that.p2.num_plate.push({src: "/static/" + data.num_plate_image[i]});
								}
								that.p2.num_plate_final.length = 0;
								for (i in data.final_num_plate_image) {
									that.p2.num_plate_final.push({src: "/static/" + data.final_num_plate_image[i]});
								}
								showLoading(false);
							}, function(){
								showLoading(false);
								that.whatTodo = "refresh";
								this.alert_msg = "服务器识别出错，请刷新网页后重试";
								$("#alertMsg").trigger('click');
							});
							break;
					}

				},
				medianCheck: function () {
					if (this.p1.median_checked) {
						this.p1.median_kernel = 0;
						$("input.usemedian").attr("disabled", "disabled");
					} else {
						this.p1.median_kernel = config.p1.median_kernel;
						$("input.usemedian").removeAttr("disabled");
					}
				},
				otsuCheck: function () {
					if (this.p1.otsu_checked) {
						this.p1.threshold = config.p1.threshold;
						$("input.useotsu").removeAttr("disabled");
					} else {
						this.p1.threshold = 0;
						$("input.useotsu").attr("disabled", "disabled");
					}
				},
				todo: function(callback) {
				    callback();
				    this.callback = function () {
                        console.log("confirm callback")
                    }
				},
				limitNum: function (whoChange) {
					switch (whoChange) {
						case 1: //高斯核
							if (parseInt(this.p1.gaussian_kernel) % 2 == 0) {
								this.alert_msg = "高斯核必须为正奇数";
								$("#alertMsg").trigger('click');
								this.p1.gaussian_kernel = config.p1.gaussian_kernel;
							}
							break;
						case 2: //中值内核
							if (parseInt(this.p1.median_kernel) % 2 == 0) {
								this.alert_msg = "内核必须为正奇数";
								$("#alertMsg").trigger('click');
								this.p1.median_kernel = config.p1.median_kernel;
							}
							break;
						case 3: //二值化阀值
							if (parseInt(this.p1.threshold) > 255 || parseInt(this.p1.threshold) < 0) {
								this.alert_msg = "阀值范围必须在0 ~ 255之间";
								$("#alertMsg").trigger('click');
								this.p1.threshold = config.p1.threshold;
							}
							break;
						case 4: //膨胀参数x
							if(parseInt(this.p1.dilate_kernel.x) < 0 || parseInt(this.p1.dilate_kernel.x) > 30){
								this.alert_msg = "横向膨胀内核范围必须在0 ~ 30之间";
								$("#alertMsg").trigger('click');
								this.p1.dilate_kernel.x = config.p1.dilate_kernel.x;
							}
							break;
						case 5: //膨胀参数y
							if(parseInt(this.p1.dilate_kernel.y) < 0 || parseInt(this.p1.dilate_kernel.y) > 30){
								this.alert_msg = "纵向膨胀内核范围必须在0 ~ 30之间";
								$("#alertMsg").trigger('click');
								this.p1.dilate_kernel.y = config.p1.dilate_kernel.y;
							}
							break;
						case 6: //膨胀参数times
							if(parseInt(this.p1.dilate_kernel.times) < 0 || parseInt(this.p1.dilate_kernel.times) > 10){
								this.alert_msg = "膨胀次数范围必须在0 ~ 10之间";
								$("#alertMsg").trigger('click');
								this.p1.dilate_kernel.times = config.p1.dilate_kernel.times;
							}
							break;
						case 7: //腐蚀参数x
							if(parseInt(this.p1.erode_kernel.x) < 0 || parseInt(this.p1.erode_kernel.x) > 30){
								this.alert_msg = "横向腐蚀内核范围必须在0 ~ 30之间";
								$("#alertMsg").trigger('click');
								this.p1.erode_kernel.x = config.p1.erode_kernel.x;
							}
							break;
						case 8: //腐蚀参数y
							if(parseInt(this.p1.erode_kernel.y) < 0 || parseInt(this.p1.erode_kernel.y) > 30){
								this.alert_msg = "纵向腐蚀内核范围必须在0 ~ 30之间";
								$("#alertMsg").trigger('click');
								this.p1.erode_kernel.y = config.p1.erode_kernel.y;
							}
							break;
						case 9: //腐蚀参数times
							if(parseInt(this.p1.erode_kernel.times) < 0 || parseInt(this.p1.erode_kernel.times) > 10){
								this.alert_msg = "腐蚀次数范围必须在0 ~ 10之间";
								$("#alertMsg").trigger('click');
								this.p1.erode_kernel.times = config.p1.erode_kernel.times;
							}
							break;
						case 10: //矩形框最低
							if(parseInt(this.p2.minSpecific) < 0 || parseInt(this.p2.minSpecific) > parseInt(this.p2.maxSpecific)){
								this.alert_msg = "最低值范围必须在 0 ~ 最高 之间";
								$("#alertMsg").trigger('click');
								this.p2.minSpecific = config.p2.minSpecific;
							}
							break;
						case 11: //矩形框最高
							if(parseInt(this.p2.maxSpecific) < parseInt(this.p2.minSpecific) || parseInt(this.p2.maxSpecific) > 6){
								this.alert_msg = "最高值范围必须在 最低 ~ 6 之间";
								$("#alertMsg").trigger('click');
								this.p2.maxSpecific = config.p2.maxSpecific;
							}
							break;
					}
				},
				gotofirst: function () {
					// 初始化前面的所有数据
					this.step = 0; //当前操作所在步骤
                    this.uploadfile = '';
					this.process_step = 0; // 当前车牌识别流程执行到的步骤
					this.selectImgSrc = ''; //  被操作的图片数据
					this.alert_msg = "请选择要识别图片";
					this.p1.gaussian_kernel = config.p1.gaussian_kernel;
					this.p1.median_kernel = config.p1.median_kernel;
					this.p1.median_checked = config.p1.median_checked;
					this.p1.sobel = config.p1.sobel;
					this.p1.isVertical = config.p1.isVertical;
					this.p1.threshold = config.p1.threshold;
					this.p1.otsu_checked = config.p1.otsu_checked;
					this.p1.dilate_kernel.x = config.p1.dilate_kernel.x;
					this.p1.dilate_kernel.y = config.p1.dilate_kernel.y;
					this.p1.dilate_kernel.times = config.p1.dilate_kernel.times;
					this.p1.erode_kernel.x = config.p1.erode_kernel.x;
					this.p1.erode_kernel.y = config.p1.erode_kernel.y;
					this.p1.erode_kernel.times = config.p1.erode_kernel.times;
					this.p2.prev_image = config.p2.prev_image;
					this.p2.minSpecific = config.p2.minSpecific;
					this.p2.maxSpecific = config.p2.maxSpecific;
					this.p2.num_plate = [{src: config.default_image}];
					this.p2.num_plate_final = [{src: config.default_image}];
					this.p3_req.num_plate_image = []; // 用于发送到服务器的图片集
					this.p3.prce = [
							{
								title: "灰度化 高斯滤波 中值滤波",
								src: config.default_image
							},
							{
								title: "Sobel算子 寻找水平、垂直边缘 混合两张边缘图",
								src: config.default_image
							},
							{
								title: "OTSU二值化 膨胀 腐蚀",
								src: config.default_image
							},
							{
								title: "垂直、水平方向白色像素累加",
								src: config.default_image
							}
						];
					this.p3.splited = [config.default_image];
					this.p3.results = [{image : config.default_image, code : ''}];
					// 跳转到第一页显示
					showOrHide(0);
					// 取消原图选中
					// 选择图片点击效果，选择识别车牌图片
					$('img.resize8').removeClass("resize8").addClass("resize10").next("div").removeClass('success').addClass('hidden');
					$('span.btn.success').removeClass('success').addClass('hidden');
			        $("#usethis").attr("disabled", "disabled");
			        $('input.upload')[0].outerHTML = $('input.upload')[0].outerHTML;
				},
                upload: function () {
                    var file = $('input.upload'),
                        that = this;
                    if(file.val() === ""){
                        this.alert_msg = "请选择上传的图片文件";
                        $("#alertMsg").trigger('click');
                    }else{
                        if(/.+\.(jpg|png|jpeg|gif|bmp)$/i.test(file.val())){
				            showLoading(true);
                            var form_data = new FormData();
                            form_data.append('file', file[0].files[0]);
                            $.ajax({
                                url: {% url 'save_file_image' %},
                                type: 'POST',
                                data: form_data,
                                processData: false,
                                contentType: false,
                                dataType: 'json',
                                success: function (data) {
                                    showLoading(false);
                                    console.log(data);
                                    if(data.result == "success"){
                                        var p = data.path.split('\\').join('/');
                                        console.log(p,data.path);
                                        that.uploadfile = p;
                                        that.selectImgSrc = p;
                                        that.alert_msg = "图片上传成功";
                                        $("#alertMsg").trigger('click');
                                        $('#usethis').removeAttr('disabled');
                                        $('img.resize8').removeClass("resize8").addClass("resize10").next("div").removeClass('success').addClass('hidden');
				                        $('span.btn.hidden').removeClass('hidden').addClass('success');
                                    }else{
                                        this.alert_msg = "当前选择文件不是可识别的图片文件，请重新选择";
                                        $("#alertMsg").trigger('click');
                                    }
                                },
                                error: function (data) {
				                    showLoading(true);
                                    console.log("error msg",data)
                                }
                            })
                        }else{
                            this.alert_msg = "当前选择文件不是可识别的图片文件，请重新选择";
                            $("#alertMsg").trigger('click');
                        }
                    }
                },
                useupload: function () {
				    this.selectImgSrc = this.uploadfile;
				    $('span.btn.hidden').removeClass('hidden').addClass('success');
                    $('img.resize8').removeClass("resize8").addClass("resize10").next("div").removeClass('success').addClass('hidden');
                }
			}

		});

		// 总体数据及处理状态
		// 页面导航栏标签特效
		$('li.ttl').hover(function () {
			$('li.ttl').removeClass('active');
			$(this).addClass('active');
		});
		// 选择图片点击效果，选择识别车牌图片
		$('img.resize10').click(function () {
			xw.process_step = 0; //每次选择图片重置后面的所有步骤
			xw.selectImgSrc = $(this).attr("src");
			$(this).removeClass("resize10").addClass("resize8").next("div").addClass('success').removeClass('hidden');
			$('img.resize8').not($(this)).removeClass("resize8").addClass("resize10").next("div").removeClass('success').addClass('hidden');
			$('span.btn.success').removeClass('success').addClass('hidden');
		});
		// 一旦修改了参数，将重新生成按钮亮起，下一步按钮不可点击
		$("input.parameter").change(function (event) {
			$("button.recreate-clickable").removeAttr('disabled');
			$("button.next-step-clickable").attr("disabled", "disabled");
		});
	</script>
{% endblock %}